<template>
  <section class="container-fluid text-white space-y-8">
    <!-- 标题与说明 -->
    <header class="space-y-2">
      <p class="kicker">ALL PRODUCTS</p>
      <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
        <h1 class="text-3xl font-bold tracking-tight">全部商品</h1>
<!--        <div class="text-white/60 text-sm">从这里按分类、搜索与分页浏览全量商品列表（已移除排序功能，交由后端返回有序数据）。</div>-->
      </div>
    </header>

    <!-- 分类导航栏 -->
    <section class="space-y-4">
      <div class="flex items-center justify-between">
        <h2 class="text-lg font-semibold">商品分类</h2>
        <button class="text-sm text-white/70 hover:text-white underline underline-offset-4" @click="clearFilters">清空筛选</button>
      </div>
      <div class="grid grid-cols-2 md:grid-cols-6 gap-3">
        <button
          :class="['px-4 py-3 rounded-2xl ring-1 text-sm transition', selectedCategory==='' ? 'ring-white/30 bg-white/[0.07]' : 'ring-white/10 hover:ring-white/30']"
          @click="selectCategory('')">
          <div class="font-medium">全部</div>
          <div class="text-xs text-white/50">All</div>
        </button>
        <button
          v-for="c in categories"
          :key="c.id"
          @click="selectCategory(c.id)"
          :class="['px-4 py-3 rounded-2xl ring-1 text-sm transition', selectedCategory===c.id ? 'ring-white/30 bg-white/[0.07]' : 'ring-white/10 hover:ring-white/30']"
        >
          <div class="font-medium">{{ c.name }}</div>
          <div class="text-xs text-white/50">{{ c.desc }}</div>
        </button>
      </div>
    </section>

    <!-- 工具栏：搜索 / 筛选 / 分页大小（已移除排序选择） -->
    <section class="card-minimal p-4 md:p-5">
      <div class="grid md:grid-cols-12 gap-3 md:gap-4 items-end">
        <!-- 搜索输入：扩大至 10 列，提升可用性 -->
        <div class="md:col-span-10">
          <label class="text-xs text-white/60">搜索</label>
          <input v-model="keyword" placeholder="搜索商品名称或关键词" class="input-control mt-1" />
          <!-- 说明：排序功能已移除，后端若需要排序，请在接口侧处理并按需返回已排序的数据集。 -->
        </div>

        <!-- 价格区间（最低价/最高价）前端筛选已删除，后续将通过后端接口按需传参实现 -->
        <!-- 此处原有两个数字输入框：minPrice/maxPrice -->

        <!-- 占位保留栅格对齐：将“每页”控件保持在两列区域 -->
        <div class="md:col-span-2">
          <label class="text-xs text-white/60">每页</label>
          <select v-model.number="pageSize" class="select-control mt-1">
            <option :value="12">12</option>
            <option :value="16">16</option>
            <option :value="20">20</option>
          </select>
        </div>
      </div>
    </section>

    <!-- 统计与结果区 -->
    <section class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
      <div class="text-sm text-white/70">共 <span class="text-white">{{ filteredCount }}</span> 件商品，当前第 <span class="text-white">{{ page }}</span>/<span class="text-white">{{ totalPages }}</span> 页</div>
      <div class="flex items-center gap-2">
        <button class="btn-outline px-3 py-1" :disabled="page<=1" @click="toPage(1)">首页</button>
        <button class="btn-outline px-3 py-1" :disabled="page<=1" @click="toPage(page-1)">上一页</button>
        <button class="btn-outline px-3 py-1" :disabled="page>=totalPages" @click="toPage(page+1)">下一页</button>
        <button class="btn-outline px-3 py-1" :disabled="page>=totalPages" @click="toPage(totalPages)">末页</button>
      </div>
    </section>

    <!-- 列表：加载骨架 or 网格 -->
    <section>
      <div v-if="loading" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <div v-for="n in pageSize" :key="`sk-${n}`" class="card-minimal overflow-hidden animate-pulse">
          <!-- 骨架图：使用 3:2 比例容器，避免布局跳动 -->
          <div class="relative w-full pt-[66%] bg-white/5 rounded-md overflow-hidden"></div>
          <div class="p-5 space-y-2">
            <div class="h-4 bg-white/10 rounded"></div>
            <div class="h-3 bg-white/10 rounded w-2/3"></div>
            <div class="h-9 bg-white/10 rounded"></div>
          </div>
        </div>
      </div>

      <div v-else class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <article v-for="p in pagedProducts" :key="p.id" class="relative card-minimal overflow-hidden group">
          <router-link :to="`/product/${p.id}`" class="block">
            <!-- 图片容器：使用 3:2 固定比例，配合绝对定位图片，保证网格整齐 -->
            <div class="relative w-full pt-[66%] bg-white/5 overflow-hidden rounded-md">
              <img :src="p.cover || '/images/apple.svg'"
                   :alt="p.name"
                   class="absolute inset-0 w-full h-full object-cover object-center transition-transform duration-300 ease-out group-hover:scale-[1.03] select-none"
                   loading="lazy" decoding="async" referrerpolicy="no-referrer" draggable="false"
                   @error="onImgError" />
            </div>
            <div class="p-5 space-y-1">
              <div class="flex items-center justify-between">
                <h3 class="font-semibold group-hover:text-emerald-400">{{ p.name }}</h3>
                <span class="text-emerald-400 font-bold">￥{{ p.price }}</span>
              </div>
              <div class="text-xs text-white/50 line-clamp-2">{{ p.brief }}</div>
              <div class="flex items-center gap-2 text-xs text-white/50 mt-1">
                <!-- 仅保留类目徽标 -->
                <span v-if="categoryOf(p)" class="px-2 py-0.5 rounded-full bg-white/5 border border-white/10">{{ categoryLabel(categoryOf(p)) }}</span>
              </div>
              <button class="btn-outline w-full mt-3" @click.prevent="addToCart(p)">加入购物车</button>
            </div>
          </router-link>
        </article>
      </div>

      <div v-if="!loading && filteredCount===0" class="py-16 text-center text-white/60">
        没有找到匹配的商品，试试调整搜索或筛选条件。
      </div>
    </section>

    <!-- 底部分页 -->
    <section class="flex items-center justify-between pt-2">
      <div class="text-sm text-white/70">第 {{ page }} / {{ totalPages }} 页</div>
      <div class="flex items-center gap-2">
        <button class="btn-outline px-3 py-1" :disabled="page<=1" @click="toPage(page-1)">上一页</button>
        <div class="text-white/70 text-sm">{{ page }}</div>
        <button class="btn-outline px-3 py-1" :disabled="page>=totalPages" @click="toPage(page+1)">下一页</button>
      </div>
    </section>
  </section>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import toast from '../composables/toast'
import {getProducts} from "../api/ProductsAPI.js";
import {getCategories} from "../api/CategoryApi.js";

// 简单防抖：当搜索关键字变化时，等待 300ms 再应用，减少不必要的计算与渲染
function debounce(fn, wait=300){
  let t
  return function(...args){ clearTimeout(t); t = setTimeout(()=>fn.apply(this,args), wait) }
}

// 分类定义（与首页保持一致 ） 分类列表
const categories = ref([])
const currentProducts = ref( []) //当前页商品列表


const route = useRoute()
const router = useRouter()

// 基础状态（已移除排序 sortKey，交由后端处理）
const products = ref([]) // 商品列表
const loading = ref(true) // 数据加载中
const selectedCategory = ref('') //选中的分类ID
const keyword = ref('') // 搜索关键字
const innerKeyword = ref('')// 搜索关键字（防抖）
const applyKeyword = debounce((v)=>{ innerKeyword.value = v }, 300) // 搜索关键字应用
watch(keyword, (v)=> applyKeyword(v)) // 搜索关键字应用

// 已删除“最低价/最高价”筛选状态，准备改由后端处理
// 移除 onlyWithImage
// const onlyWithImage = ref(false)

const page = ref(1)
const pageSize = ref(12)
const totaLcount = ref(0)


// 数据加载：请求全量商品；随后从 URL Query 初始化筛选条件（已去除排序 sort 参数）
onMounted(async () => {
  try {
    // 取一页 200 条，避免频繁翻页下还没接后端分页
    let {data:data} = await getProducts({ pageNum: 1, pageSize: 200 })
    console.log(data)
    const list =data.data.list
    // 模拟延迟如不需要可移除
    await new Promise(r => setTimeout(r, 200))
    products.value = list
  } finally {
    loading.value = false
  }


  // 初始化：从 URL Query 读入筛选
  const q = route.query || {}
  selectedCategory.value = (q.cat ?? '').toString()
  keyword.value = (q.kw ?? '').toString()
  innerKeyword.value = keyword.value
  // 已移除对 q.min/q.max 的读取：价格区间改由后端实现
  const pg = Number(q.page)
  const ps = Number(q.ps)
  if(!Number.isNaN(pg) && pg>=1) page.value = pg
  if(!Number.isNaN(ps) && [12,16,20].includes(ps)) pageSize.value = ps

  await loadCategories()
})
// 从后端获取类目列表
// 定义一个异步函数用于加载类目数据
async function loadCategories() {
  try {
    // 调用getCategories()方法获取类目数据，await表示等待异步操作完成
    const resp = await getCategories()
    // 在控制台打印获取到的原始响应数据，用于调试
    console.log(resp)
    // 直接赋值的代码
    // categories.value = resp.data.data

    // 从响应中提取data字段（使用可选链操作符?.避免null/undefined错误）
    const body = resp?.data
    // 处理数据：如果body.data是数组则使用它，否则使用空数组
    const rows = Array.isArray(body?.data) ? body.data : []

    // 如果没有数据（数组长度为0）
    if (!rows.length) {
      // 在控制台警告：后端返回空类目，已使用默认类目
      console.warn('后端返回空类目，已回退默认类目')
      return
    }

    // 有数据时，将后端返回的类目数据转换为前端需要的格式
    categories.value = rows.map(c => ({
      id: String(c.categoryId ?? ''),  // 确保id是字符串类型，没有则为空
      name: c.name ?? '',              // 名称，没有则为空
      desc: c.desc ?? ''               // 描述，没有则为空
    }))
    // 在控制台打印转换后的类目数据，用于调试
    console.log('categories =>', categories.value)
  } catch (err) {
    // 如果发生错误（如网络请求失败）
    console.error('加载类目失败：', err)
    // 请求失败时也使用默认类目，避免页面空白
    categories.value = DEFAULT_CATEGORIES
  }
}

// 分类推断（与首页一致）
//类目微标
function categoryOf(p){
  if (p && p.categoryId != null) {
    const id = String(p.categoryId)
    if (categories.value.some(c => c.id === id)) return id
  }
  const n = p.name || ''
  if (n.includes('苹果') || n.includes('富士')) return 'apple'
  if (n.includes('猕猴桃') || n.includes('奇异果')) return 'kiwi'
  if (n.includes('芒')) return 'mango'
  if (n.includes('橙')) return 'orange'
  if (n.includes('香蕉')) return 'banana'
  if (n.includes('莓') || n.includes('葡萄') || n.includes('车厘')) return 'berry'
  return 'berry'
}
function categoryLabel(id){
  if(!id) return '其他'
  const it = categories.value.find(x => x.id===id)
  return it?.name || '其他'
}

// 过滤：综合关键字与类目得到结果集（已移除前端排序，按原始/后端顺序展示）
// 说明：排序功能统一由后端接口实现，前端不再维护 sortKey，也不再写入路由参数
const filtered = computed(() => {
  const kw = innerKeyword.value.trim()
  let list = products.value.slice()
  if (kw) list = list.filter(p => (p.name||'').includes(kw) || (p.brief||'').includes(kw))
  if (selectedCategory.value) list = list.filter(p => categoryOf(p) === selectedCategory.value)
  // 不再进行前端排序，保持数据源顺序
  return list
})
// 统计与分页切片
const filteredCount = computed(() => filtered.value.length)
const totalPages = computed(() => Math.max(1, Math.ceil(filteredCount.value / pageSize.value)))
const pagedProducts = computed(() => {
  const p = Math.min(Math.max(1, page.value), totalPages.value)
  const start = (p - 1) * pageSize.value
  return filtered.value.slice(start, start + pageSize.value)
})

// URL Query 同步：移除 sort 参数，仅同步 cat/kw/page/ps
// 这样可与后端查询接口解耦，避免前端遗留参数造成歧义
watch([selectedCategory, innerKeyword, page, pageSize],
  ([cat, kw, pg, ps]) => {
    const q = {
      ...(cat ? { cat } : {}),
      ...(kw ? { kw } : {}),
      ...(pg && pg>1 ? { page: String(pg) } : {}),
      ...(ps && ps!==12 ? { ps: String(ps) } : {}),
    }
    router.replace({ query: q })
  },
  { deep: false }
)
// 当筛选条件变化时重置到第1页（去除 sort 监听）
watch([selectedCategory, innerKeyword, pageSize], () => { page.value = 1 })

// 交互函数
function selectCategory(id){ selectedCategory.value = id }
function toPage(p){ page.value = Math.min(Math.max(1, p), totalPages.value) }

function addToCart(p){
  const raw = JSON.parse(localStorage.getItem('cart')||'[]')
  // 统一主键：优先 productId，再用 id；全部转字符串，避免类型差异
  const pid = String(p?.productId ?? p?.id ?? '')
  if(!pid){ toast.error('商品ID缺失，无法加入购物车'); return }
  const idx = raw.findIndex(i => String(i.id) === pid)
  if (idx > -1) raw[idx].qty += 1
  else raw.push({ id: pid, name: p.name, price: Number(p.price)||0, cover: p.cover, qty: 1 })
  localStorage.setItem('cart', JSON.stringify(raw))
  window.dispatchEvent(new CustomEvent('cart-updated'))
  toast.success('已加入购物车')
}

function onImgError(e){ e.target.src = '/images/apple.svg' }

// 清空筛选：已移除排序重置逻辑
function clearFilters(){
  selectedCategory.value = ''
  keyword.value = ''
  innerKeyword.value = ''
  page.value = 1
  pageSize.value = 12
}
</script>